{% block sw_category_layout_card %}
<mt-card
    class="sw-category-layout-card"
    position-identifier="sw-category-layout"
    :title="$tc('sw-category.base.cms.title')"
    :is-loading="isLoading"
>
    <div class="sw-category-layout-card__base-layout">

        {% block sw_category_detail_layout_preview %}
        <div
            class="sw-category-layout-card__preview"
            role="button"
            tabindex="0"
            @click="openLayoutModal"
            @keydown.enter="openLayoutModal"
        >
            <sw-cms-list-item
                :page="cmsPage"
                :disabled="!acl.can('category.editor')"
                active
            />
        </div>
        {% endblock %}

        {% block sw_category_detail_layout_modal %}
        <sw-cms-layout-modal
            v-if="showLayoutSelectionModal"
            :cms-page-types="pageTypes"
            :headline="headline"
            :pre-selection="cmsPage"
            @modal-layout-select="onLayoutSelect"
            @modal-close="closeLayoutModal"
        />
        {% endblock %}

        {% block sw_category_detail_layout_desc %}
        <div class="sw-category-layout-card__desc">

            {% block sw_category_detail_layout_desc_info %}
            <div class="sw-category-layout-card__desc-info">

                {% block sw_category_detail_layout_desc_info_headline %}
                <div
                    class="sw-category-layout-card__desc-headline"
                    :class="{ 'is--empty': !cmsPage }"
                >
                    {{ cmsPage ? cmsPage.name : $tc('sw-category.base.cms.defaultTitle') }}
                </div>
                {% endblock %}

                {% block sw_category_detail_layout_desc_info_subheadline %}
                <div
                    class="sw-category-layout-card__desc-subheadline"
                    :class="{ 'is--empty': !cmsPage }"
                >
                    {{ pageTypeTitle }}
                </div>
                {% endblock %}

            </div>
            {% endblock %}

            {% block sw_category_detail_layout_desc_actions %}
            <div class="sw-category-layout-card__desc-actions">

                {% block sw_category_detail_layout_desc_actions_layout %}
                <mt-button
                    class="sw-category-detail-layout__change-layout-action"
                    size="small"
                    :disabled="!acl.can('category.editor')"
                    variant="secondary"
                    @click="openLayoutModal"
                >
                    {{ $t(cmsPage ? 'sw-category.base.cms.changeLayout' : 'sw-category.base.cms.changeLayoutEmpty') }}
                </mt-button>
                {% endblock %}

                <sw-context-button class="sw-category-layout-card__desc-actions-menu">
                    {% block sw_category_detail_layout_desc_actions_designer %}
                    <sw-context-menu-item
                        class="sw-category-detail-layout__open-in-pagebuilder"
                        :disabled="!acl.can('category.editor')"
                        @click="openInPagebuilder"
                    >
                        {{ $t('global.default.edit') }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_category_detail_layout_desc_actions_remove %}
                    <sw-context-menu-item
                        v-if="cmsPage"
                        :disabled="!acl.can('category.editor')"
                        class="sw-category-detail-layout__layout-reset"
                        @click="onLayoutReset"
                    >
                        {{ $t('global.default.delete') }}
                    </sw-context-menu-item>
                    {% endblock %}
                </sw-context-button>
            </div>
            {% endblock %}

            <sw-cms-reset-inheritance />
        </div>
        {% endblock %}
    </div>
</mt-card>
{% endblock %}
